import React, { Component } from 'react';
import { Form, Row, Col, Icon } from 'antd';
import ShowType from '../../../routes/common/showType';
import * as commonFunc from '../../Common/commonFunc';
import styles from '../../../index.less';
import * as config from '../../../utils/config';

const FormItem = Form.Item;

class TabMainTableComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      sTabId: props.app.currentPane.key, /* 当前标签 */
      componentName: props.componentName, /* 组件名 */
      masterConfig: props.masterConfig, /* 配置 */
      formData: props.formData,
      sId: props.sId, /* 业务数据Id */
      dataList: [], /* 数据 */
      sActiveId: props.sActiveId, /* 窗体Id */
      disabled: props.disabled, /* 是否是查看状态 */
      sBillNo: '', /* 单据编号 */
      tCreateDate: '', /* 制单日期 */
      sTeamId: '', /* 班组id */
      dProcessQty: '', /* 上报数量 */
      sMachineId: '', /* 机器名称 */
      dQualifiedProductionQty: '', /* 合格数量 */
      dNoQualifiedProductQty: '', /* 不合格数量 */
      dWasteProductionQty: '', /* 作废数量 */
      dConversionQty: '', /* 换算数量 */
      dWageMoney: '', /* 计件工资 */
      dTimeMoney: '', /* 工时工资 */
      dLossMoney: '', /* 损失金额 */
      dAllMoney: '', /* 总金额 */
      sSlaveMemo: '', /* 备注 */
      reserveContent: '',
      expand: false,
    };
  }

  componentWillMount() {
    /* 获取主表数据 */
    const {
      masterConfig, sActiveId, sId, componentName, sTabId, formData,
    } = this.state;
    const { dispatch } = this.props;
    if (sId !== undefined && sId !== '') {
      const mainId = masterConfig.sId;
      /* 表Id */
      const value = { sId, pageSize: '', pageNum: '' };
      /* 业务数据Id */
      const dataUrl = `${config.server_host}business/getBusinessDataByFormcustomId/${mainId}?sModelsId=${sActiveId}`;
      dispatch({
        type: 'content/getUrlPostData',
        payload: {
          url: dataUrl, sTabId, componentName, value, formRoute: '/mftproductionreportmaster', returnType: 'data',
        },
      });
    } else if (sId === '' && this.props.newIdFlag) {
      const url = `${config.server_host}getUuid/${this.props.newIdlength}`;
      dispatch({
        type: 'content/getCopyDataId',
        payload: {
          sTabId, url, formRoute: '/mftproductionreportmaster', componentName,
        },
      });
    }
    const subjectConfig = formData.filter(item => (item.sTbName.toLowerCase() === 'mftproductionreportslave'))[0].gdsconfigformslave;
    if (masterConfig.gdsconfigformslave !== undefined) {
      const mainConfig = masterConfig.gdsconfigformslave;
      this.setState({
        sId: sId !== undefined ? sId : '',
        sBillNo: mainConfig.filter(item => (item.sName.toLowerCase() === 'sbillno'))[0],
        tCreateDate: mainConfig.filter(item => (item.sName.toLowerCase() === 'tcreatedate'))[0],
        sTeamId: subjectConfig.filter(item => (item.sName.toLowerCase() === 'steamid'))[0],
        dProcessQty: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dprocessqty'))[0],
        sMachineId: subjectConfig.filter(item => (item.sName.toLowerCase() === 'smachineid'))[0],
        dQualifiedProductionQty: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dqualifiedproductionqty'))[0],
        dNoQualifiedProductQty: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dnoqualifiedproductqty'))[0],
        dWasteProductionQty: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dwasteproductionqty'))[0],
        dConversionQty: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dconversionqty'))[0],
        dWageMoney: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dwagemoney'))[0],
        dTimeMoney: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dtimemoney'))[0],
        dLossMoney: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dlossmoney'))[0],
        dAllMoney: subjectConfig.filter(item => (item.sName.toLowerCase() === 'dallmoney'))[0],
        sSlaveMemo: subjectConfig.filter(item => (item.sName.toLowerCase() === 'sslavememo'))[0],
      });
    }
  }

  componentWillReceiveProps(nextProps) {
    const {
      sId, disabled, content, dataSet,
    } = nextProps;
    const { dataList } = content;
    const {
      sDataListTabId, returnType, urlData, loading, componentName,
    } = dataList;
    this.setState({ disabled, dataList: dataSet });
    if (this.state.sTabId === sDataListTabId && this.state.sTabId === nextProps.app.currentPane.key
      && this.state.componentName === componentName) {
      if (loading) return;
      if (returnType === 'data') {
        this.setState({
          dataList: urlData,
          sId: sId !== undefined ? sId : '',
        });
      }
      this.setState({ sId });
    }
    const mainConfig = this.state.masterConfig.gdsconfigformslave;
    if (Object.keys(mainConfig).length > 0) {
      const { sActiveId, app, form } = nextProps;
      const childProps = {
        app, form, sActiveId, sId, dataList, disabled,
      };
      const reserveContent = commonFunc.Reserve(mainConfig, childProps);
      this.setState({ reserveContent });
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    const { componentName } = nextProps;
    const { sId } = this.props;
    if (sId === undefined) {
      return true;
    }
    let flag = true;
    if (nextState.disabled !== this.state.disabled) {
      return true;
    }
    if (this.state.sTabId === nextProps.app.currentPane.key &&
      this.state.componentName === componentName) {
      flag = true;
    } else {
      flag = false;
    }
    return flag;
  }

  handleToggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  };

  render() {
    const {
      app, form, handleModalPane, dataName, dataType, handleSelectChange, selectData, onClose,
    } = this.props;
    const { sBillNo, tCreateDate } = this.state;
    const {
      sTeamId, dProcessQty, sMachineId, dQualifiedProductionQty, dNoQualifiedProductQty, dWasteProductionQty, dConversionQty, dWageMoney, dTimeMoney, dLossMoney, dAllMoney, sSlaveMemo,
    } = this.state;
    const {
      sId, sActiveId, disabled, reserveContent, expand,
    } = this.state;
    const dataList = { ...this.state.dataList, ...selectData };
    const childProps = {
      app, form, sActiveId, dataList, sId, disabled, handleModalPane, handleSelectChange, dataName, dataType, onClose,
    };
    const sBillNoProps = { showConfig: sBillNo, ...childProps };
    const tCreateDateProps = { showConfig: tCreateDate, ...childProps };
    const sTeamIdProps = { showConfig: sTeamId, ...childProps };
    const dProcessQtyProps = { showConfig: dProcessQty, ...childProps };
    const sMachineIdProps = { showConfig: sMachineId, ...childProps };
    const dQualifiedProductionQtyProps = { showConfig: dQualifiedProductionQty, ...childProps };
    const dNoQualifiedProductQtyProps = { showConfig: dNoQualifiedProductQty, ...childProps };
    const dWasteProductionQtyProps = { showConfig: dWasteProductionQty, ...childProps };
    const dConversionQtyProps = { showConfig: dConversionQty, ...childProps };
    const dWageMoneyProps = { showConfig: dWageMoney, ...childProps };
    const dTimeMoneyProps = { showConfig: dTimeMoney, ...childProps };
    const dLossMoneyProps = { showConfig: dLossMoney, ...childProps };
    const dAllMoneyProps = { showConfig: dAllMoney, ...childProps };
    const sSlaveMemoProps = { showConfig: sSlaveMemo, ...childProps };
    return (
      <FormItem className={styles.searchMainForm}>
        <Row type="flex" style={{ height: expand ? 'auto' : '100px', overflow: 'hidden' }}>
          <Col
            span={6}
            order={sBillNo.iOrder > 24 ? 24 : sBillNo.iOrder}
            style={{ display: sBillNo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sBillNo" showDefaultName="单据编号" {...sBillNoProps} />
          </Col>
          <Col
            span={6}
            order={tCreateDate.iOrder > 24 ? 24 : tCreateDate.iOrder}
            style={{ display: tCreateDate.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="tCreateDate" showDefaultName="制单日期" {...tCreateDateProps} />
          </Col>
          <Col
            span={6}
            order={sTeamId.iOrder > 24 ? 24 : sTeamId.iOrder}
            style={{ display: sTeamId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sTeamId" showDefaultName="班组名称" {...sTeamIdProps} />
          </Col>
          <Col
            span={6}
            order={dProcessQty.iOrder > 24 ? 24 : dProcessQty.iOrder}
            style={{ display: dProcessQty.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dProcessQty" showDefaultName="上报数量" {...dProcessQtyProps} />
          </Col>
          <Col
            span={6}
            order={sMachineId.iOrder > 24 ? 24 : sMachineId.iOrder}
            style={{ display: sMachineId.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sMachineId" showDefaultName="机器名称" {...sMachineIdProps} />
          </Col>
          <Col
            span={6}
            order={dQualifiedProductionQty.iOrder > 24 ? 24 : dQualifiedProductionQty.iOrder}
            style={{ display: dQualifiedProductionQty.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dQualifiedProductionQty" showDefaultName="合格数量" {...dQualifiedProductionQtyProps} />
          </Col>
          <Col
            span={6}
            order={dNoQualifiedProductQty.iOrder > 24 ? 24 : dNoQualifiedProductQty.iOrder}
            style={{ display: dNoQualifiedProductQty.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dNoQualifiedProductQty" showDefaultName="不合格数量" {...dNoQualifiedProductQtyProps} />
          </Col>
          <Col
            span={6}
            order={dWasteProductionQty.iOrder > 24 ? 24 : dWasteProductionQty.iOrder}
            style={{ display: dWasteProductionQty.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dWasteProductionQty" showDefaultName="作废数量" {...dWasteProductionQtyProps} />
          </Col>
          <Col
            span={6}
            order={dConversionQty.iOrder > 24 ? 24 : dConversionQty.iOrder}
            style={{ display: dConversionQty.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dConversionQty" textArea showDefaultName="换算数量" {...dConversionQtyProps} />
          </Col>
          <Col
            span={6}
            order={dWageMoney.iOrder > 24 ? 24 : dWageMoney.iOrder}
            style={{ display: dWageMoney.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dWageMoney" showDefaultName="计件工资" {...dWageMoneyProps} />
          </Col>
          <Col
            span={6}
            order={dTimeMoney.iOrder > 24 ? 24 : dTimeMoney.iOrder}
            style={{ display: dTimeMoney.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dTimeMoney" showDefaultName="工时工资" {...dTimeMoneyProps} />
          </Col>
          <Col
            span={6}
            order={dLossMoney.iOrder > 24 ? 24 : dLossMoney.iOrder}
            style={{ display: dLossMoney.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dLossMoney" showDefaultName="损失金额" {...dLossMoneyProps} />
          </Col>
          <Col
            span={6}
            order={dAllMoney.iOrder > 24 ? 24 : dAllMoney.iOrder}
            style={{ display: dAllMoney.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="dAllMoney" showDefaultName="总金额" {...dAllMoneyProps} />
          </Col>
          <Col
            span={6}
            order={sSlaveMemo.iOrder > 24 ? 24 : sSlaveMemo.iOrder}
            style={{ display: sSlaveMemo.bVisible ? 'block' : 'none' }}
          >
            <ShowType sName="sSlaveMemo" textArea showDefaultName="备注" {...sSlaveMemoProps} />
          </Col>
          {reserveContent}
        </Row>
        <button className={styles.collapseA} onClick={this.handleToggle}>
          <span>{expand ? '缩略展示' : '显示全部'}</span><Icon type={expand ? 'up' : 'down'} />
        </button>
      </FormItem>
    );
  }
}

export default TabMainTableComponent;
